<template>
	<!-- 壁纸主题 -->
	<view>
		<view :class="scrollX ? 'arritem' : ''" v-if="scrollX === true">
			<!-- 主页显示的内容 -->
			<view @tap="preView(item.arr)" class="scroll-item" v-for="(item,i) in homeRandomArr" :key="i">
				<image class="scroll-img" v-show="!homeLoadingShow" @load="load" :src="item.imgUrl" :lazy-load="true" mode="aspectFill"></image>
				<loading :flag="true" v-if="homeLoadingShow"></loading>
				<view class="scroll-vi">
					<h4 class="scroll-h">{{item.name}}</h4>
					<p class="scroll-p">{{item.text}}</p>
				</view>
			</view>

			
		</view>
		<!-- 查看全部显示的内容 -->
		<view @tap="preView(item.arr)" class="scroll-item" v-else v-for="(item,i) in randomArr" :key="i">
			<image :src="item.imgUrl" v-show="!loadingShow" @load="loads" :lazy-load="true" class="view-y scroll-img" mode="aspectFill"></image>
			<loading :flag="true" v-if="loadingShow"></loading>
			<view class="scroll-vi view-y">
				<h4 class="scroll-h">{{item.name}}</h4>
				<p class="scroll-p">{{item.text}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		// 为true的话展示横向滚动
		props: {
			scrollX: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				themtList: [],
				themtsList:[],
				homeLoadingShow:true,
				loadingShow:true,
			};
		},
		created() {
			this.themtList = [...this.categoryList]
			this.themtsList = [...this.categoryList]
		},
		methods: {
			load(){
				this.homeLoadingShow = false
			},
			loads(){
				this.loadingShow = false
			},
			preView(arr) {
				uni.navigateTo({
					url: '/pages/preView/preView',
					success(res) {
						res.eventChannel.emit('wallPaperData', arr)
					}
				})
			}
		},
		computed: {
			...mapState('category', ['categoryList']),
			// 主页随机显示三个主题
			homeRandomArr() {
				const arr = []
				for (let i = 0; i < 3; i++) {
					const randomIndex = Math.floor(Math.random() * this.themtList.length)
					const item = this.themtList.splice(randomIndex, 1)[0]
					arr.push(item)
				}
				return arr
			},
			
			// 查看全部随机筛选显示五个主题
			randomArr() {
				const arr = []
				for (let i = 0; i < 5; i++) {
					const randomIndex = Math.floor(Math.random() * this.themtsList.length)
					const item = this.themtsList.splice(randomIndex, 1)[0]
					arr.push(item)
				}
				return arr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.arritem {
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		position: relative;
		margin-bottom: 30rpx;
		width: 550rpx;
		height: 320rpx;
		margin: 0 30rpx;
		
		.scroll-img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			will-change: transform; //渲染性能优化
			backdrop-filter: blur(3px); //毛玻璃效果
			box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
		}

		.scroll-vi {
			backdrop-filter: blur(3px); //毛玻璃效果
			box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
			position: absolute;
			bottom: 0;
			left: 0rpx;
			width: 550rpx;
			border-radius: 0 0 20rpx 20rpx;
			height: 110rpx;
			line-height: 45rpx;
			text-align: left;

			.scroll-h {
				padding-left: 30rpx;
				margin-top: 15rpx;
			}

			.scroll-p {
				padding-left: 30rpx;
				font-size: 30rpx;
			}
		}

		.view-y {
			width: 690rpx;
		}
	}
</style>